<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html lang="zh">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>住客信息修改</title>
    <link rel="stylesheet" href="/static/common/layui/css/layui.css">
    <link rel="stylesheet" href="/static/admin/css/style.css">
    <script src="/static/common/layui/layui.js"></script>
    <script src="/static/common/jquery-3.3.1.min.js"></script>
    <script src="/static/common/vue.min.js"></script>

    <script language="javascript">

        function sumbit_sure() {
            let gnl = confirm("是否确定修改?");
            if (gnl === true) {
                let vip_id = $("select[name='name']").val();
                let home_id = $("select[name='h_type']").val();
                let enterTime = $("input[name='enterTime']").val();
                let exitTime = $("input[name='exitTime']").val();
                if (enterTime === ""){
                    $("input[name='enterTime']").next("span").text("入住时间不能为空");
                    return false;
                } else {
                    $("input[name='enterTime']").next("span").text("");
                    // 发送异步请求，修改填写数据
                    $.post("/book", {
                        "action": "update",
                        "id": "${requestScope.order.id}",
                        "vip_id": vip_id,
                        "home_id": home_id,
                        "enterTime": enterTime,
                        "exitTime": exitTime
                    }, function (data) {
                        if(data === "true"){
                            alert("修改成功");
                        } else {
                            alert("修改失败");
                        }
                    })
                    return true;
                }
            } else {
                return false;
            }
        }


        function loadDatas() {
            // 用post请求获取会员和房间列表的信息
            $.post("/book", {"action": "loadData"}, function (data) {
                // 遍历数据并添加选项
                for (let i = 0; i < data.vips.length; i++) {
                    // 添加会员信息
                    let id = data.vips[i].id;
                    let name = data.vips[i].name;
                    if(id === ${requestScope.order.vipId}){
                        $("select[name='name']").append("<option value='" + id + "' selected>" + name + "</option>");
                    } else {
                        $("select[name='name']").append("<option value='" + id + "'>" + name + "</option>");
                    }
                }
                for (let i = 0; i < data.homeList.length; i++) {
                    // 添加房间信息
                    let home_id = data.homeList[i].id;
                    let home_num = data.homeList[i].num;
                    let home_type = data.homeList[i].h_type;
                    $("select[name='h_type']").append("<option value='" + home_id + "'>" + home_num + "--" + home_type + "</option>");
                }
                $("select[name='h_type']").append("<option value='${requestScope.order.homeId}' selected>${requestScope.order.num}--${requestScope.order.h_type}</option>");
            }, "json");
        }

        // 页面加载完成后执行
        $(document).ready(function() {
            loadDatas();
        });

    </script>

</head>
<body>
<div id="app">
    <!--顶栏-->
    <%@include file="/views/top.jsp" %>

    <div class="main">
        <!--左栏-->
        <div class="left">
            <ul class="cl">
                <!--顶级分类-->
                <li v-for="vo,index in menu" :class="{hidden:vo.hidden}">
                    <a href="javascript:;" :class="{active:vo.active}" @click="onActive(index)">
                        <i class="layui-icon" v-html="vo.icon"></i>
                        <span v-text="vo.name"></span>
                        <i class="layui-icon arrow" v-show="vo.url.length==0">&#xe61a;</i> <i v-show="vo.active"
                                                                                              class="layui-icon active">&#xe623;</i>
                    </a>
                    <!--子级分类-->
                    <div v-for="vo2,index2 in vo.list">
                        <a href="javascript:;" :class="{active:vo2.active}" @click="onActive(index,index2)"
                           v-text="vo2.name"></a>
                        <i v-show="vo2.active" class="layui-icon active">&#xe623;</i>
                    </div>
                </li>
            </ul>
        </div>
        <!--右侧-->
        <div class="right">
            <fieldset class="layui-elem-field layui-field-title">
                <legend>修改住客信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <label class="layui-form-label">住客姓名</label>
                <div class="layui-input-block">
                    <select name="name" class="layui-input" autocomplete="off" id="layui-form-selected" required>

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入住房间</label>
                <div class="layui-input-block">
                    <select name="h_type" class="layui-input" autocomplete="off" required>

                    </select>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">入住时间</label>
                <div class="layui-input-block">
                    <input type="datetime-local" name="enterTime" value="${requestScope.order.enterTime}" required
                           autocomplete="off" class="layui-input" aria-required="true">
                    <span style="color: red"></span>
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">退房时间</label>
                <div class="layui-input-block">
                    <input type="datetime-local" name="exitTime" value="${requestScope.order.exitTime}" required
                           autocomplete="off" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-block">
                    <input type="button" class="layui-btn" value="确认修改" onclick="sumbit_sure();"/>
                    <input type="button" class="layui-btn layui-btn-danger" value="取消修改"
                           onclick="javascript:history.go(-1);"/>
                </div>
            </div>

        </div>
    </div>
</div>
<script src="/static/admin/js/config.js"></script>
<script src="/static/admin/js/script.js"></script>
</body>
</html>
